Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / map / internal / MapExportProgressPanel.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute bottom-4 right-4 z-20 w-72 bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-gray-200 dark:border-zinc-800 p-4 space-y-3 animate-in slide-in-from-bottom-4Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex justify-between items-centerTa5d6ff"Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fffont-bold text-sm text-gray-900 dark:text-zinc-100Ta5d6ff"Tff7b72>{{

status.status === "completed" ? Te6edf3$t("map.download_ready") : Te6edf3$t("map.exporting")

}}Tff7b72</span>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"Ta5d6ffstatus.status === Ta5d6ff'Ta5d6ffcompletedTa5d6ff'Ta5d6ff || status.status === Ta5d6ff'Ta5d6fffailedTa5d6ff'Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-gray-400Ta5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffdismissTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffcloseTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>

Tff7b72</button>

Tff7b72<button

v-else

Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-red-500 hover:text-red-600 uppercase tracking-tighterTa5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffcancelTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

{{ Te6edf3$t("common.cancel") }}

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffstatus.status !== Ta5d6ff'Ta5d6ffcompletedTa5d6ff'Ta5d6ff && status.status !== Ta5d6ff'Ta5d6fffailedTa5d6ff'Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-full h-2 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hiddenTa5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffh-full bg-blue-500 transition-all duration-300Ta5d6ff"

Te6edf3:style=Ta5d6ff"Ta5d6ff{ width: status.progress + Ta5d6ff'Ta5d6ff%Ta5d6ff'Ta5d6ff }Ta5d6ff"

Tff7b72>Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex justify-between text-[10px] text-gray-500 mt-1 uppercase font-bold tracking-widerTa5d6ff"Tff7b72>

Tff7b72<spanTff7b72>{{ status.current }} / {{ status.total }} tilesTff7b72</span>

Tff7b72<spanTff7b72>{{ status.progress }}%Tff7b72</span>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffstatus.status === Ta5d6ff'Ta5d6ffcompletedTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffflex flex-col gap-2Ta5d6ff"Tff7b72>

Tff7b72<a

Te6edf3:href=Ta5d6ff"Ta5d6ff`/api/v1/map/export/Tff7b72${Te6edf3exportIdTff7b72}Ta5d6ff/download`Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-center space-x-2 w-full py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-bold transition-colors shadow-md text-xsTa5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffdownloadTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>

Tff7b72<spanTff7b72>{{ Te6edf3$t("map.download_now") }}Tff7b72</span>

Tff7b72</a>

Tff7b72<button

Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-center space-x-2 w-full py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-bold transition-colors shadow-md text-xsTa5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffshow-offline-mapsTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffmap-checkTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>

Tff7b72<spanTff7b72>Show in Offline MapsTff7b72</span>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffstatus.status === Ta5d6ff'Ta5d6fffailedTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-red-500 bg-red-50 dark:bg-red-950/20 p-2 rounded-lgTa5d6ff"Tff7b72>

{{ status.error }}

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

export default {

name: "MapExportProgressPanel",

components: { MaterialDesignIcon },

props: {

status: { type: Object, required: true },

exportId: { type: [String, Number], default: null },

},

emits: ["dismiss", "cancel", "show-offline-maps"],

};

Tff7b72</script>